<!doctype html>
<!--
    ____________________________
  /|............................|
 | |:     	 CASH MUSIC        :|
 | |:     " cashmusic.org "    :|
 | |:     ,-.   _____   ,-.    :|
 | |:    ( `)) [_____] ( `))   :|
 |v|:     `-`   ' ' '   `-`    :|
 |||:     ,______________.     :|
 |||...../::::o::::::o::::\.....|
 |^|..../:::O::::::::::O:::\....|
 |/`---/--------------------`---|
 `.___/ /====/ /=//=/ /====/____/
      `--------------------'

-->

<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>CASH Music</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="apple-touch-icon" href="https://static-cashmusic.netdna-ssl.com/www/apple-touch-icon.png">
        <!-- Place favicon.ico in the root directory -->
        <link rel="shortcut icon" href="https://static-cashmusic.netdna-ssl.com/www/favicon.png" type="image/png">
        <script src="https://static-cashmusic.netdna-ssl.com/www/js/vendor/modernizr-2.8.3.min.js"></script>
        <link rel="stylesheet" href="https://static-cashmusic.netdna-ssl.com/www/css/normalize.css">
        <link rel="stylesheet" href="https://static-cashmusic.netdna-ssl.com/www/css/pure/base-min.css">
        <!--[if lte IE 8]>
  		<link rel="stylesheet" href="https://static-cashmusic.netdna-ssl.com/www/css/pure/grids-responsive-old-ie-min.css">
		<![endif]-->
		<!--[if gt IE 8]><!-->
        <link rel="stylesheet" href="https://static-cashmusic.netdna-ssl.com/www/css/pure/grids-responsive-min.css">
		<!--<![endif]-->

    <link rel="stylesheet" href="https://static-cashmusic.netdna-ssl.com/www/css/header.css">
    <link rel="stylesheet" href="https://static-cashmusic.netdna-ssl.com/www/css/base.css">
    <link rel="stylesheet" href="https://static-cashmusic.netdna-ssl.com/www/css/pages.css">
    <link rel="stylesheet" href="https://static-cashmusic.netdna-ssl.com/www/css/helper.css">

        <!--Fonts-->
		<link href='https://fonts.googleapis.com/css?family=Caesar+Dressing|Playfair+Display|Montserrat:400,700|Nunito:300,400,700' rel='stylesheet' type='text/css'>

        <!--Mobile Viewport -->
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="viewport" content="initial-scale=1.0,user-scalable=no">

				<!-- Open Graph Meta Data -->
				<meta name="twitter:card" content="summary_large_image" />
				<meta name="twitter:site" content="@cashmusic" />
				<meta name="twitter:creator" content="@cashmusic" />
				<meta property="og:url" content="http://cashmusic.github.io/cashmusic.js/" />
				<meta property="og:type" content="website" />
				<meta property="og:title" content="CASH Music / CASHMusic.js" />
				<meta property="og:description" content="Front-end made easy. Embeds, lightboxes, and audio players. Animate, tween, or customize any page element by timecode or song progress — without a line of JavaScript." />
				<meta property="og:image" content="https://static-cashmusic.netdna-ssl.com/www/img/constant/social/share.jpg" />

        <script type="text/javascript" src="https://static-cashmusic.netdna-ssl.com/www/js/main.js"></script>
        <script type="text/javascript" src="../source/cashmusic.js" data-options="lightboxvideo"></script>

    </head>

<body>
    <!--[if lt IE 8]>
        <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->
   <div id="wrapper">
    <header role="banner">
      <div id="constant">
         <div id="top">
            <h1 class="logo"><a href="https://cashmusic.org/"><div class="icon icon-logo"><span>CASH Music</span></div></a></h1><!--logo-->
              <div class="menutoggle"><span></span><span></span><span></span></div><!-- menutoggle -->
            <nav  class="pure-u-1 pure-u-md-1-2">
                <ul class="pure-u-1">
                  <li><a class="home" href="https://cashmusic.org/">Home</a></li>
                  <li><a class="about" href="http://about.cashmusic.org/">About us</a></li>
                  <li><a class="platform" href="http://platform.cashmusic.org/">Tools</a></li>
                  <li><a class="watt" href="https://watt.cashmusic.org/">Watt</a></li>
                  <li><a class="education" href="http://education.cashmusic.org/">Education</a></li>
                  <li><a class="donate" href="https://donate.cashmusic.org/">Donate</a></li>
                </ul>
            </nav>
            <div id="platform-signup">
                <a href="https://cashmusic.org/admin/dosignup/" target="_blank">Sign up</a> <span>or</span><a class="login" href="https://cashmusic.org/admin/" target="_blank">Login</a>
            </div><!--platform-signup-->
         </div><!--top-->
         <div id="collapsed" class="hide">
            <h1 class="logo"><a href="https://cashmusic.org/"><div class="icon icon-logo"><span>CASH Music</span></div></a></h1><!--logo-->
              <div class="menutoggle"><span></span><span></span><span></span></div><!-- menutoggle -->
              <nav class="pure-u-1 pure-u-md-1-2">
                  <ul class="pure-u-1">
                      <li><a class="home" href="https://cashmusic.org/">Home</a></li>
                      <li><a class="about" href="http://about.cashmusic.org/">About us</a></li>
                      <li><a class="platform" href="http://platform.cashmusic.org/">Tools</a></li>
                      <li><a class="watt" href="https://watt.cashmusic.org/">Watt</a></li>
                      <li><a class="education" href="http://education.cashmusic.org/">Education</a></li>
                      <li><a class="donate" href="https://donate.cashmusic.org/">Donate</a></li>
                  </ul>
              </nav>
                <div id="platform-signup">
                    <a href="https://cashmusic.org/admin/dosignup/" target="_blank">Sign up</a> <span>or</span><a class="login" href="https://cashmusic.org/admin/" target="_blank">Login</a>
                </div><!--platform-signup-->
                <div class="overview">
                          <div class="overview-inner">
                           <div class="pure-u-1 pure-u-md-1-2">
                             <div class="overview-content">
                               <h5>TLDR;</h5>
                               <h2>CASH Music is a nonprofit empowering artists through open tools &amp; knowledge.</h2>
                               <p>We've built open source tools that are free to use, now &amp; forever, that let artists easily build web stores, trade downloads for email addresses, set up download codes, &amp; connect to their fans. With our publication, Watt, we ask &amp; answer questions that affect working musicians. We believe the best way to support music is by directly empowering musicians.</p>
                             </div><!--overview-content-->
                           </div><!--pure--><div class="pure-u-1 pure-u-md-1-2">
                             <div class="pure-u-1 pure-u-md-1-2">
                                  <div class="overview-content">
                                <h5>OUR TOOLS</h5>
                                <a href="http://platform.cashmusic.org/"><img src="http://static.cashmusic.netdna-cdn.com/www/img/platform/platform-screen_v9.jpg" alt="Our Tools"/></a>
                                <p>We make free &amp; open tools that connect all the services you already use in one place.</p>
                              </div><!--inner-->
                              </div><!--pure--><div class="pure-u-1 pure-u-md-1-2">
                                 <div class="overview-content">
                                <h5>WATT</h5>
                                <a href="https://watt.cashmusic.org/"><img src="http://static.cashmusic.netdna-cdn.com/www/img/constant/texture/watt-home.jpg" alt="Watt"/></a>
                                <p>Watt is our publication dedicated to asking and answering the questions that matter.</p>
                              </div><!--inner-->
                              </div><!--pure-->
                           </div><!--pure-->
                        </div><!--overview-inner-->
                        </div><!--overview-->
         </div><!--collapsed-->
      </div><!--constant-->

    </header>


        <main id="main" class="pure-u-1" role="main">
						<article class="pure-u-1 articlepage">
<section class="article-content">
		<section>
				<h1 class="page-title">CASHMusic.js Documentation</h1>
		</section>
				<section class="pure-u-1 pure-u-md-1-4"><aside>
					<h3>Index</h3>
				<ol>
					<li><a href="#embeds">CASH Music embeds</a></li>
					<li><a href="#lightboxes">Video lightboxes</a></li>
					<li><a href="#inline">Inline players</a></li>
					<li><a href="#toggles">Play/pause/stop toggles</a></li>
					<li><a href="#players">Full UI players</a></li>
					<li><a href="#advanced">Tweening/advanced styling</a></li>
				</ol>
			</aside></section><section class="pure-u-1 pure-u-md-3-4">

				<h3><a href="../"><i class="icon icon-home"></i>Return to CASHMusic.js home</a></h3>

				<blockquote><p>
					cashmusic.js is meant to be simple to use, providing its functionality without the
					need for much additional scripting. Simply include the main cashmusic.js script (7.2kb)
					and additional scripts will be loaded as needed. The global namespace is kept
					clean with the addition of just a single window.cashmusic object under which
					all cashmusic.js objects and functions live. Family style.</p>
					<p>All examples assume that cashmusic.js has been included.</p>
				</blockquote>


				<a name="embeds"></a>
				<h3>CASH Music platform embeds</h3>
				<p>
					These embeds are the only parts of cashmusic.js that require the full CASH Music
					platform. They are the standard method of embedding iframe-based elements from
					an instance of the platform on any other site.
				</p><p>
					In this basic example, an element is embedded in place by id only:
				</p>
				<script src="https://gist.github.com/jessevondoom/5856499.js"></script>
				<p>
					This example shows all options for the embeds. Endpoint and id are always required,
					but you can also choose to have the element appear in an overlay (lightboxed.) A
					lightboxed element will create a link inline with the caption passed in to the
					window.cashmusic.embed function. You can also pass in an object specifying size and
					position of the element inside the overlay. Follow the format below.
				</p><p>
					For embed calls after page load, provide a target element as the final argument to
					window.cashmusic.embed. This will place the embed, iframe or lightbox link, inside
					the first matching element. The target should be a string that will work with
					document.querySelector, like "#id", "#id .class", or similar.
				</p><p>
					For styling, all iframe embeds are placed in a &lt;div&gt; classed with "cashmusic embed"
					and lightboxed embed links are placed in a &lt;span&gt; classed "cashmusic embed".
				</p><p>
					All options:
				</p>
				<script src="https://gist.github.com/jessevondoom/5860605.js"></script>

				<br /><br />
				<a name="lightboxes"></a>
				<h3>Video lightboxes</h3>
				<p>
					Lightboxed video is easy. So easy it's dumb I'm even writing documentation for it.
					All you need to do is add 'data-options="lightboxvideo"' to the initial cashmusic.js
					&lt;script&gt; tag when you include it. Like this:
				</p>
				<script src="https://gist.github.com/jessevondoom/5861103.js"></script>
				<p>
					I'm not even saying anything else. Link to regular YouTube/Vimeo links and they
					turn into lightboxes. On mobile they just work like normal. The size is automatic.
					You've seen it before. Whatever. Moving on.
				</p><p>
					Styles for the overlays can be found in the templates folder in overlay.css, with
					markup in the overlay.html file. You can overwrite these files to change, or simply
					redeclare the styles in a stylesheet of your own.
				</p>
				<br /><br />
				<a name="inline"></a>
				<h3>Inline audio players</h3>
				<p>
					The inline audio player option lets you turn a link to an MP3 into a play/pause
					button. Any link tagged with "cashmusic soundplayer inline" will turn into a toggle
					link.
				</p><p>
					Inline players will get "stopped" and "playing" classes added to them as appropriate.
				</p>
				<script src="https://gist.github.com/jessevondoom/5862424.js"></script>

				<br /><br />
				<a name="toggles"></a>
				<h3>Play/pause/stop toggles</h3>
				<p>
					Toggles make links or other DOM elements into play/pause or play/stop buttons for
					specific sounds or playlists. They work like inline players but need to have a
					sound or player id set. To turn a link or element into a toggle use the
					"cashmusic soundplayer playpause" and "cashmusic soundplayer playstop" classes.
					Add sound id or player id is required, using the "data-soundid" or
					"data-playerid" data attribute of the DOM element.
				</p><p>
					Player ids are set on creation of a playlist, covered below. The sound id can be
					set as part of the playlist, or will be automatically set to the url of the sound
					when it is added as an inline player or as part of a playlist.
				</p>
				<script src="https://gist.github.com/jessevondoom/5862453.js"></script>

				<br /><br />
				<a name="players"></a>
				<h3>Full UI players</h3>
				<p>
					These players are HTML5-compatible highly-styleable audio players created from a
					simple collection of links or JSON-based playlist. They use the tweening
					techniques mentioned below with a simple HTML/CSS template, so it's very easy
					to customize a little or a whole lot.
				</p><p>
					To create a new player you first need to define a &lt;div&gt; and add the
					"cashmusic soundplayer playlist" classes. If you set an id for the &lt;div&gt; it
					will become the playler id, if not you need to specify a unique player id in the
					JSON or the window.cashmusic.soundplayer object will assign it a random id.
				</p><p>
					Tracks are added two ways. If you're using HTML markup to add your player tracks
					will be created for all links to audio. (Note the "display:none;" style to avoid)
					a brief flicker as links turn into the player. If you use JSON you'll be able to
					specify more options per track and you don't need to add links to the div.
				</p><p>
					The following examples show basic players. We've set aside space in the definitions
					for more advanced features like album art, deep track metadata, tagging, reporting
					ISRC and playtime, and resolution of private assets for secure players.
				</p><p>
					To customize players you can simply add styles based on the templates/soundplayer.css
					to your own stylesheets. cashmusic.js prepends styles to the beginning of the
					document &lt;head&gt; so your styles will override defaults. For deeper customization
					alter the markup in the templates/soundplayer.html file.
				</p>
				<script src="https://gist.github.com/jessevondoom/5862620.js"></script>
				<p>
					An example of a player built with a JSON playlist. Fun with HTML whitespace.
				</p>
				<script src="https://gist.github.com/jessevondoom/5862770.js"></script>

				<br /><br />
				<a name="advanced"></a>
				<h3>Tweening/advanced player styling</h3>
				<p>
					The default players are built using CSS tweens that can be applied to any DOM
					element. Altering styles based on audio progress is pretty simple. You need to
					add the "cashmusic tween" styles to an element, then specify style changes for
					play or load progress (in percentage or timecode "m:ss") of the piece of audio —
					it will work with any style that takes a numeric value. You may mix percentage
					and timecode in one declaration. These style changes are defined as JSON in the
					"data-tween" attribute of the element. Like so:
				</p>
				<script src="https://gist.github.com/jessevondoom/5863670.js"></script>
				<p>
					You'll notice that there is a similar "data-styles" attribute defined there.
					Well not every style change is a tween on load/play progress. Sometimes you just
					want to set things after an event. That's cool. To use the "data-styles" attribute
					just add the "cashmusic setstyles" classes to your element and go for it. You can
					change any style, numeric or otherwise, in response to these events:
				</p><p>
					finish, pause, play, resume, stop, load, [timecode, format: 'm:ss', 'h:mm:ss']
				</p><p>
					You can set styles for one or more of these events by setting the corresponding
					property in the JSON definition. Each is an array and can accept multiple stlye
					definitions. You can set styles for any timecode by referencing timecode as
					"m:ss" or "h:mm:ss" — the format matching the play time on the standard player.
				</p><p>
					Tween and setstyle elements respond to either a sound or a playlist by setting
					the onSound or onPlayer property in the JSON object. You must set one to have
					any effect. The player id is set at playlist definition, as is the sound id. If
					you do not set a sound id it will be set to the URL of the sound, so that's a
					good bet for most inline / one-off sounds.
				</p><p>
					Look at the <a href="../demos/throwingmuses/">Throwing Muses demo</a> for advanced tweening/styling in practice.
				</p>
			</div>
		</div>
	</div>
</section><!--article-content-->
</article>
</main>
<footer role="contentinfo">

<script type="text/javascript"> window.cashmusic.embed({endpoint:'https://cashmusic.org/public',elementid:'7748',cssoverride:'#mainspc{padding:10px 0px 0 0px; background:rgba(0,0,0,0); color:#999; margin-bottom:30px;}input{border-color:#999;}.cash_notation{color:#999}input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, textarea:focus{background:#111; color:#999;}'});</script>
			<div class="supporters">
					<a class="pure-u-1 pure-u-md-2-5" href="https://www.shuttleworthfoundation.org/" target="_blank"><img src="https://static-cashmusic.netdna-ssl.com/www/img/constant/supporters/shuttleworth.png" alt="Shuttleworth"/></a><a class="pure-u-1-3 pure-u-md-1-5" href="https://www.maxcdn.com/" target="_blank"><img src="https://static-cashmusic.netdna-ssl.com/www/img/constant/supporters/maxcdn.png" alt="MAXCDN"/></a><a class="pure-u-1-3 pure-u-md-1-5" href="http://mailchimp.com/" target="_blank"><img src="https://static-cashmusic.netdna-ssl.com/www/img/constant/supporters/mailchimp.png" alt="Mailchimp"/></a><a class="pure-u-1-3 pure-u-md-1-5" href="http://www.rackspace.com/" target="_blank"><img src="https://static-cashmusic.netdna-ssl.com/www/img/constant/supporters/rackspace.png" alt="Rackspace"/></a>
			</div><!--supporters-->
	<nav>
			<div  class="pure-u-1-2 pure-u-md-1-5">
			<h6 class="title">Read</h6>
			<ul>
					<li><a href="https://cashmusic.org/">Home</a></li>
					<li><a href="https://medium.com/cash-music">Blog</a></li>
			</ul>
			</div><!--pure--><div  class="pure-u-1-2 pure-u-md-1-5">
			<h6 class="title">About</h6>
			<ul>
					<li><a href="http://about.cashmusic.org/#mission">Mission</a></li>
					<li><a href="http://about.cashmusic.org/#team">Team</a></li>
					<li><a href="http://about.cashmusic.org/#board">Board</a></li>
					<li><a href="http://about.cashmusic.org/#advisors">Advisors</a></li>
			</ul>
			</div><!--pure--><div  class="pure-u-1-2 pure-u-md-1-5">
			<h6 class="title">Tools</h6>
			<ul>
					<li><a href="http://platform.cashmusic.org/">Platform</a></li>
					<li><a href="http://venues.cashmusic.org/" target="_blank">Venue Data</a></li>
					<li><a href="http://cashmusic.github.io/cashmusic.js/">Cashmusic.js</a></li>
					<li><a href="http://help.cashmusic.org/">Support</a></li>
			</ul>
			</div><!--pure--><div  class="pure-u-1-2 pure-u-md-1-5">
			<h6 class="title">Developers</h6>
			<ul>
					<li><a href="https://cashmusic.org/docs/">Documentation</a></li>
					<li><a href="https://github.com/cashmusic/platform">Github</a></li>
			</ul>
			</div><!--pure--><div  class="pure-u-1 pure-u-md-1-5">
			<h6 class="title">Social</h6>
			<ul>
					<li><a href="https://twitter.com/cashmusic">Twitter</a></li>
					<li><a href="https://instagram.com/cashmusicorg/">Instagram</a></li>
					<li><a href="https://www.facebook.com/cashmusic.org">Facebook</a></li>
					<li><a href="https://www.youtube.com/user/cashmusicorg">Youtube</a></li>
					<li><a href="https://cashmusic-slack.herokuapp.com/">Slack</a></li>
			</ul>
			</div><!--pure-->
	</nav>
			<h5>CASH Music is a <a href="https://medium.com/cash-music/the-organization-is-our-protest-song-1c9b01ea3ceb" target="_blank">nonprofit</a> working on <a href="http://about.cashmusic.org/" >free</a> &amp; <a href="https://medium.com/cash-music/jumping-off-cliffs-c112de91c5fd" target="_blank">open</a> <a href="https://platform.cashmusic.org/">tools</a> that give artists control of their careers</a></h5>
			<h6>&copy; 2016 CASH Music. All our code is open-source and free forever.<br/>Authors retain all rights to any works on this page, sharing them under a <a href="http://creativecommons.org/licenses/by/4.0/" target="_blank">CC BY license</a> unless otherwise noted.</h6>
</footer>
</div><!--wrapper-->

<!--twitter-->
<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>

<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-55083593-1', 'auto');
ga('send', 'pageview');

</script>

<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
	var js, fjs = d.getElementsByTagName(s)[0];
	if (d.getElementById(id)) return;
	js = d.createElement(s); js.id = id;
	js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
	fjs.parentNode.insertBefore(js, fjs);
	}(document, 'script', 'facebook-jssdk'));
</script>
</body>
</html>
